<template>
    <div>
        <div class="top">
            <van-icon name="arrow-left" size="20px" @click="$router.history.go(-1)" />
            <p>个人资料</p>
        </div>
        <div class="main">
            <div class="img">
                <section>
                    <van-uploader>
                        <Avatar :size="50" :user="{ loginname: obj.loginname, avatar_url: obj.avatar_url }"></Avatar>
                    </van-uploader>
                </section>

                <aside>
                    <van-uploader>
                        <van-button type="default" round size="mini">设置背景</van-button>
                    </van-uploader>
                </aside>
            </div>

            <div class="center">
                <div class="box1">
                    <van-field is-link readonly label="二维码" @click="show1 = true" />
                    <van-popup v-model="show1" round position="right" :style="{ width: '100%', height: '50%' }">
                        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg3.doubanio.com%2Fview%2Fnote%2Flarge%2Fpublic%2Fp33775751.jpg&refer=http%3A%2F%2Fimg3.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669364822&t=31d127262d13f3a44b91ad571b7e217d"
                            alt="">
                    </van-popup>
                </div>
                <div class="box2">
                    <van-field class="a" v-model="loginname" is-link readonly label="昵称" :placeholder="obj.loginname" />
                    <van-field v-model="content" is-link readonly label="签名" placeholder="说点什么吧" />
                    <van-field class="b" v-model="fieldValue" is-link readonly label="城市" placeholder="请选择城市"
                        @click="show = true" />
                    <van-popup v-model="show" round position="bottom">
                        <van-cascader v-model="cascaderValue" title="请选择所在地区" :options="options" @close="show = false"
                            @finish="onFinish" />
                    </van-popup>
                </div>

                <div class="box3">
                    <!-- 输入手机号，调起手机号键盘 -->
                    <van-field class="a" v-model="tel" type="tel" label="手机号" />
                    <!-- 允许输入正整数，调起纯数字键盘 -->
                    <van-field v-model="ID" type="ID" label="微钓ID" />
                    <van-field class="b" v-model="fieldValue1" is-link readonly label="地址" placeholder="编辑和查看收货地址"
                        @click="show2 = true" />
                    <van-popup v-model="show2" closeable position="right" :style="{ width: '100%', height: '100%' }">
                        <van-nav-bar title="收货地址" left-arrow />
                        <van-empty description="没有内容" v-if="!this.address.length"></van-empty>
                        <van-cell-group inset @click="$router.history.go(-1)">
                            <van-cell :title="address.receiver" value="内容" label="描述信息" />
                          </van-cell-group>
                        <router-link to="/address">
                            <van-button round type="danger" class="bottom-button">新增地址</van-button>
                        </router-link>
                    </van-popup>
                </div>

                <div class="box5" @click="$store.dispatch('user/logout')">
                    退出登录
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getAddress } from './api'
export default {
    name: 'VueAppIndex',

    data() {
        return {
            address: [],
            obj: [],
            loginname: '',
            content: '',
            show: false,
            show1: false,
            show2: false,
            fieldValue: '',
            fieldValue1: '',
            cascaderValue: '',
            tel: '',
            ID: '',
            // 选项列表，children 代表子选项，支持多级嵌套
            options: [
                {
                    text: '浙江省',
                    value: '330000',
                    children: [{ text: '杭州市', value: '330100' }],
                },
                {
                    text: '江苏省',
                    value: '320000',
                    children: [{ text: '南京市', value: '320100' }],
                },
            ],
        };
    },

    mounted() {
        let users = this.$store.state.user.user
        this.obj = users
        console.log(this.obj, 'user');

        this.getAddress()
    },

    methods: {
        // 全部选项选择完毕后，会触发 finish 事件
        onFinish({ selectedOptions }) {
            this.show = false;
            this.fieldValue = selectedOptions.map((option) => option.text).join('/');
        },

        getAddress() {
            getAddress().then(res => {
                this.address = res.data
                console.log( this.address, 'address');
            })
        }
    },
};
</script>

<style scoped lang="scss">
.top {
    display: flex;
    background: #eee;

    .van-icon {
        margin: 15px 0 0 5px;
    }

    p {
        font-size: 20px;
        margin-left: 31vw;
        margin-top: 12px;
    }
}

.main {
    flex: 1;
    overflow-x: hidden;
    background: #eee;

    .img {
        width: 97vw;
        height: 250px;
        margin: 5px;
        border-radius: 8px;
        background: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Fback_pic%2F00%2F06%2F52%2F705629af3545bb6.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669288099&t=5b12dfb24d7457e5e33722bbe052c88e') no-repeat 100% 100%;
        position: relative;

        section {
            position: absolute;
            top: 180px;
            left: 20px;
        }

        aside {
            position: absolute;
            top: 200px;
            right: 20px;
        }
    }
}

.center {
    .box1 {
        width: 97vw;
        margin: 5px;
        border-radius: 10px;
        /* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
        box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

        img {
            width: 100%;
        }

        .van-field {
            border-radius: 10px;
        }
    }

    .box2 {
        width: 97vw;
        margin: 5px;
        border-radius: 10px;
        /* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
        box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

        .a {
            border-radius: 10px 10px 0 0;
        }

        .b {
            border-radius: 0 0 10px 10px;
        }
    }

    .box3 {
        width: 97vw;
        margin: 5px;
        border-radius: 10px;
        /* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
        box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

        .a {
            border-radius: 10px 10px 0 0;
        }

        .b {
            border-radius: 0 0 10px 10px;
        }

        .bottom-button {
            width: 160px;
            height: 40px;
            margin-left: 110px;
            margin-top: 280px;
        }
    }

    .box5 {
        width: 97vw;
        height: 40px;
        background: #fff;
        margin: 5px;
        border-radius: 10px;
        /* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
        box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
        color: #f00;
        text-align: center;
        line-height: 40px;
    }
}
</style>